<template>
  <div class="p-3">
    <div class="position-relative mb-2">
      <div class="header-title">中国航空工业集团武仪仓库数据看板</div>
      <a href="#" class="position-absolute header-warehouse" @click.prevent="exit_()">{{ warehouse }}</a>
      <span class="position-absolute header-time">{{ datetimeInfo }}</span>
    </div>

    <div class="d-flex mb-2 bgcolor-dark" style="height: 5.5rem;">
      <div class="py-2" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">今日入库订单</div>
        <div class="text-primary fw-bold fs-2 text-center">10</div>
      </div>
      <div class="py-2" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">入库物料数</div>
        <div class="text-primary fw-bold fs-2 text-center">36</div>
      </div>
      <div class="py-2" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">待上架</div>
        <div class="text-primary fw-bold fs-2 text-center">0</div>
      </div>
      <div class="py-2 border-start border-primary" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">今日出库订单</div>
        <div class="text-primary fw-bold fs-2 text-center">47</div>
      </div>
      <div class="py-2" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">已完成订单</div>
        <div class="text-primary fw-bold fs-2 text-center">40</div>
      </div>
      <div class="py-2" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">缺件订单</div>
        <div class="text-primary fw-bold fs-2 text-center">7</div>
      </div>
      <div class="py-2" style="flex-grow:1;flex-basis:0;">
        <div class="text-white fw-bolder text-center">已发货数</div>
        <div class="text-primary fw-bold fs-2 text-center">115</div>
      </div>
    </div>

    <div class="row gx-2" style="height: calc(100vh - 11.5rem)">
      <div class="col-2" style="height: 100%;">
        <div class="bgcolor-dark mb-2" style="height: calc((100% - 0.5rem)/2)">
          <div class="text-white text-center fw-bolder border-bottom border-dark" style="height: 2.6rem;line-height: 2.6rem;">作业中订单
          </div>
          <div ref="autoplayingRef2" class="carousel slide overflow-hidden" style="height: calc(100% - 2.6rem);">
            <div class="carousel-inner">
              <div v-for="chunk, index in autoplayingChunk2" class="carousel-item" :class="{ 'active': index == 0 }">
                <div v-for="item in chunk" :key="item.id" class="text-white p-2 d-flex">
                  <div><svg class="bi text-primary">
                      <use href="#record-fill" />
                    </svg></div>
                  <div class="ms-1">
                    <div>组件[{{ item.text }}]</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-indicators carousel-indicators-custom">
              <template v-for="chunk, index in autoplayingChunk2">
                <button type="button" :data-bs-slide-to="index" :class="{ 'active': index == 0 }"></button>
              </template>
            </div>
          </div>
        </div>
        <div class="bgcolor-dark" style="height: calc((100% - 0.5rem)/2)">
          <div class="text-warning text-center fw-bolder border-bottom border-dark" style="height: 2.6rem;line-height: 2.6rem;">异常订单
          </div>
          <div ref="autoplayingRef3" class="carousel slide overflow-hidden" style="height: calc(100% - 2.6rem);">
            <div class="carousel-inner">
              <div v-for="chunk, index in autoplayingChunk3" class="carousel-item" :class="{ 'active': index == 0 }">
                <div v-for="item in chunk" :key="item.id" class="text-white p-2 d-flex">
                  <div><svg class="bi text-warning">
                      <use href="#record-fill" />
                    </svg></div>
                  <div class="ms-1">
                    <div>组件[{{ item.text }}]</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-indicators carousel-indicators-custom">
              <template v-for="chunk, index in autoplayingChunk3">
                <button type="button" :data-bs-slide-to="index" :class="{ 'active': index == 0 }"></button>
              </template>
            </div>
          </div>
        </div>
      </div>

      <div class="col-8" style="height: 100%;">
        <div class="mb-2" style="height: calc((100% - 0.5rem)/2)">
          <div class="row gx-1" style="height: 100%;">
            <div class="col-4" style="height: 100%;">
              <PieStorageLocUsageSuammryBlock></PieStorageLocUsageSuammryBlock>
            </div>
            <div class="col-4" style="height: 100%;">
              <BarStorageLocLaneUsageSummaryBlock></BarStorageLocLaneUsageSummaryBlock>
            </div>
            <div class="col-4" style="height: 100%;">
              <PieStorageMaterialChangeSummaryBlock></PieStorageMaterialChangeSummaryBlock>
            </div>
          </div>
        </div>
        <div style="height: calc((100% - 0.5rem)/2)">
          <BarOrderMonthWorkSummaryBlock></BarOrderMonthWorkSummaryBlock>
        </div>
      </div>

      <div class="col-2" style="height: 100%;">
        <div class="bgcolor-dark mb-2">
          <div class="text-white px-2 border-bottom border-dark d-flex align-items-center mb-2" style="height: 2.6rem;">
            <span class="fw-bold">工位1</span>
            <span class="badge text-bg-success ms-2">在线</span>
          </div>
          <div class="d-flex justify-content-between px-2 text-white mb-2">
                <span>当日已完成笔数</span>
                <span>10</span>
          </div>
          <div class="d-flex justify-content-between px-2 text-white pb-2">
                <span>当日待完成笔数</span>
                <span>3</span>
          </div>
        </div>

        <div class="bgcolor-dark mb-2">
          <div class="text-white px-2 border-bottom border-dark d-flex align-items-center mb-2" style="height: 2.6rem;">
            <span class="fw-bold">工位2</span>
            <span class="badge text-bg-secondary ms-2">离线</span>
          </div>
          <div class="d-flex justify-content-between px-2 text-white mb-2">
                <span>当日已完成笔数</span>
                <span>10</span>
          </div>
          <div class="d-flex justify-content-between px-2 text-white pb-2">
                <span>当日待完成笔数</span>
                <span>3</span>
          </div>
        </div>

        <div class="bgcolor-dark mb-2">
          <div class="text-white px-2 border-bottom border-dark d-flex align-items-center mb-2" style="height: 2.6rem;">
            <span class="fw-bold">工位3</span>
            <span class="badge text-bg-secondary ms-2">离线</span>
          </div>
          <div class="d-flex justify-content-between px-2 text-white mb-2">
                <span>当日已完成笔数</span>
                <span>10</span>
          </div>
          <div class="d-flex justify-content-between px-2 text-white pb-2">
                <span>当日待完成笔数</span>
                <span>3</span>
          </div>
        </div>

        <div class="bgcolor-dark mb-2">
          <div class="text-white px-2 border-bottom border-dark d-flex align-items-center mb-2" style="height: 2.6rem;">
            <span class="fw-bold">工位4</span>
            <span class="badge text-bg-success ms-2">在线</span>
          </div>
          <div class="d-flex justify-content-between px-2 text-white mb-2">
                <span>当日已完成笔数</span>
                <span>10</span>
          </div>
          <div class="d-flex justify-content-between px-2 text-white pb-2">
                <span>当日待完成笔数</span>
                <span>3</span>
          </div>
        </div>

      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { format } from 'date-fns'
import { zhCN } from 'date-fns/locale'
import { useRouter } from 'vue-router'
import { Carousel } from 'bootstrap';
import { padStart, chunk } from 'lodash-es'


//import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'

import PieStorageLocUsageSuammryBlock from '@/views/pie-storageLocUsageSuammryBlock.vue';
import BarStorageLocLaneUsageSummaryBlock from '@/views/bar-storageLocLaneUsageSummaryBlock.vue';
import PieStorageMaterialChangeSummaryBlock from '@/views/pie-storageTimeSummaryBlock.vue';
import BarOrderMonthWorkSummaryBlock from '@/views/bar-orderMonthWorkSummaryBlock.vue';

import useWarehouseStore from '@/stores/warehouse.js';

const router = useRouter();

const warehouseStore = useWarehouseStore();

const datetimeInfo = ref('');
const warehouse = ref(warehouseStore.getWarehouse());

const autoplayingRef2 = ref(null);
const autoplayingRef3 = ref(null);
onMounted(() => {
  startDatetime();

  //作业中订单
  setTimeout(() => {
    var carousel = new Carousel(autoplayingRef2.value, {
      interval: 6000,
      ride: 'carousel',
      touch: false,
      pause: false,
    })
    autoplaying2(carousel);
  }, 2000);

  //异常订单
  setTimeout(() => {
    var carousel = new Carousel(autoplayingRef3.value, {
      interval: 3000,
      ride: 'carousel',
      touch: false,
      pause: false,
    })
    autoplaying3(carousel);
  }, 3000);

});

//获取作业中订单
const autoplayingChunk2 = ref([]);
function autoplaying2(carousel) {
  var list = [];
  for (var i = 0; i < 28; i++) {
    list.push({ id: i, text: 'CA08018038' })
  }

  autoplayingChunk2.value = chunk(list, 6);

  carousel.to(0);

  setTimeout(() => {
    autoplaying2(carousel);
  }, 120 * 1000);
}

//获取异常订单
const autoplayingChunk3 = ref([]);
function autoplaying3(carousel) {
  var list = [];
  for (var i = 0; i < 28; i++) {
    list.push({ id: i, text: 'CA08018038' })
  }

  autoplayingChunk3.value = chunk(list, 6);

  carousel.to(0);

  setTimeout(() => {
    autoplaying3(carousel);
  }, 120 * 1000);
}

function startDatetime() {
  datetimeInfo.value = format(new Date(), 'yyyy-MM-dd(cccc) HH:mm:ss', { locale: zhCN });
  setTimeout(() => {
    startDatetime();
  }, 1000);
}

function exit_() {
  warehouseStore.clearWarehouse();
  router.push('/warehouse-select');
}
</script>


<style scoped>
.header-title {
  background: url('@/assets/header-title-bg.png') center no-repeat;
  background-size: 100% 100%;
  height: 3rem;
  line-height: 3rem;
  text-align: center;
  font-size: 1.25rem;
  color: #bde4ff;
  letter-spacing: 0.2rem;
}

.header-warehouse {
  left: 0;
  bottom: -0.5rem;
  font-size: 1.25rem;
  color: #bde4ff;
}

.header-time {
  right: 0;
  bottom: -0.5rem;
  font-size: 1.25rem;
  color: #bde4ff;
}

.bgcolor-dark {
  background-color: #100C2A;
}

.v-enter-active,
.v-leave-active {
  transition: opacity 2s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
